<script setup>
const { data } = await useFetch("/api/courses");
console.log(data.value);
</script>
<template>
    <h1>Курсы</h1>
    <hr>
    <div class="courses">
        <div class="course"  v-for="course in data.body"  v-bind:key="course">
            <div class="pic">
                <img v-bind:src="course.url" alt="">
            </div>
            <div class="info">
                <h2>{{course.name}}</h2>
                <p>{{ course.description }}</p>
                <a href="#"> узнать больше</a>
            </div>
        </div>
    </div>
   

</template>

<style scoped>
h2{
    font-size: 34px;
}
h1{
    margin: 20px;
}
a{
    color: #00f;

}
.course{
    border-radius: 15px;
    border: 1px solid #000;
    padding: 15px;
    margin: 15px;

    display: flex;
    align-items: center;
    gap: 15px;
}
.course img{
    width: 150px;
    border-radius: 10px;
}




</style>